<script lang="ts" setup>
import { toRefs } from 'vue';
import { user, loginUrl } from '@/api';
import { useUserStore } from '@/store'

const userState = useUserStore();
const { userInfo } = toRefs(userState);
console.log(userState);

const logout = async () => {
	// console.log(window);
	const { ok, data } = await user.logout();
	if (!ok) {
		return;
	}
	window.location.href = loginUrl;
};
</script>

<template>
	<header class="header">
		<div class="header__left">
			<img class="header__logo" src="@/assets/images/logo.png" alt="" />
			<p class="header__title">
				<span class="header__title-text">管理后台</span>
			</p>
		</div>
		<div class="header__right">
			<a-popover class="header__popover" :arrow-style="{ display: 'none' }">
				<a-avatar
					class="header__logo"
					:size="32"
					:trigger-icon-style="{ color: '#3491FA' }"
					:auto-fix-font-size="false"
					:style="{ backgroundColor: '#168CFF' }"
				>
					<img :src="userInfo.avatarUrl" alt="" />
				</a-avatar>
				<template #content>
					<p class="sign-out" @click="logout">
						<i class="iconfont icon-a-touxiangtuichudenglu"></i>
						<span class="sign-out__text">退出登录</span>
					</p>
				</template>
			</a-popover>
		</div>
	</header>
</template>

<style lang="less" scoped>
.header {
	height: 60px;
	background-color: white;
	border-bottom: 1px solid #e5e6e8;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
	.header__left {
		display: flex;
		align-items: center;
		.header__logo {
			width: 84px;
		}
		.header__title {
			.header__title-text {
				font-size: 18px;
				font-weight: 600;
				line-height: 28px;
				color: #1d2129ff;
				position: relative;
				display: inline-block;
				margin-left: 32px;
				&::before {
					content: '';
					display: block;
					width: 1px;
					height: 24px;
					position: absolute;
					left: -16px;
					top: 50%;
					transform: translate(0, -50%);
					background: #ccccccff;
				}
			}
		}
	}
	.header__right {
	}
}
</style>
<style lang="less">
.header__popover {
	transform: translate(-16px, 0);
	.arco-trigger-arrow {
		display: none;
	}
	.arco-trigger-content {
		padding: 10px 8px;
		.arco-popover-content {
			margin: 0;
		}
	}
	.sign-out {
		display: flex;
		align-items: center;
		height: 36px;
		padding: 0 16px 0px 8px;
		cursor: pointer;
		&:hover {
			background: #f2f3f5;
		}
		.sign-out__text {
			white-space: nowrap;
			margin-left: 8px;
			color: #1d2129;
		}
	}
}
</style>
